import React from 'react';
import { Address } from '@/type/AddressType';
import SvgIcon from '@/components/SvgIcon/SvgIcon';
import { Dialog, Toast } from 'antd-mobile';
import './AddressItem.scss';
import { useEnhanceDispatch } from '@/hooks';
import { deleteAddress, fetchAddressList } from '@/store/modules/addressStore';

interface AddressItemProps {
  address: Address;
}

const AddressItem: React.FunctionComponent<AddressItemProps> = ({ address }) => {
  const enhanceDispatch = useEnhanceDispatch();
  /**
   * @description 点击删除按钮的回调函数
   * */
  const handleDelete = async () => {
    const confirm = await Dialog.confirm({ content: `确定删除${address.receiver}吗?`, header: '温馨提示' });
    if (!confirm) return;
    try {
      const deleteMessage = await enhanceDispatch(deleteAddress(address.id)).unwrap();
      await enhanceDispatch(fetchAddressList());
      Toast.show({ icon: 'success', content: deleteMessage });
    } catch (rejectedValueOrSerializedError: any) {
      Toast.show(rejectedValueOrSerializedError);
    }
  };
  return (
    <div className="address-item">
      <div className="info">
        <span className="name">姓名:{address.receiver}</span>
        <span className="fullAddress">地址:{address.addressDetail}</span>
        <span className="mobile">手机号:{address.mobile}</span>
      </div>
      <div className="icon">
        <SvgIcon name="edit" width="25px" height="25px"></SvgIcon>
      </div>
      <div className="icon" onClick={handleDelete}>
        <SvgIcon name="delete" width="25px" height="25px"></SvgIcon>
      </div>
      <div className="tag">默认</div>
    </div>
  );
};

export default AddressItem;